<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ page isELIgnored="false"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en" class="app">
<head>
<meta charset="utf-8" />
<title>Musik | Web Application</title>
<meta name="description"
	content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="stylesheet" href="js/jPlayer/jplayer.flat.css"
	type="text/css" />
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="css/animate.css" type="text/css" />
<link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" />
<link rel="stylesheet" href="css/simple-line-icons.css" type="text/css" />
<link rel="stylesheet" href="css/font.css" type="text/css" />
<link rel="stylesheet" href="css/app.css" type="text/css" />
<!--[if lt IE 9]>
    <script src="js/ie/html5shiv.js"></script>
    <script src="js/ie/respond.min.js"></script>
    <script src="js/ie/excanvas.js"></script>
  <![endif]-->
<style type="text/css">
div .span {
	margin: 0 auto;
	display: block;
	text-align: center;
	padding-top: 10px;
}

form .col-md-7 {
	padding-left: 0px;
	margin-bottom: 15px;
}
</style>
<!-- 用于访问tokenServlet 生成令牌 -->
<script src="tokenServlet"></script>
</head>
<body class="bg-info dker">
	<section id="content" class="m-t-lg wrapper-md animated fadeInUp">
	<div class="container aside-xl">
		<a class="navbar-brand block" href="index.html"><span
			class="h1 font-bold">Musik</span></a>
		<section class="m-b-lg"> <header class="wrapper text-center">
		<strong>Sign in to get in touch</strong> </header> <!-- 表单信息 -->
		<form action="loginServlet" method="post">
			<div class="form-group">
				<input type="email" placeholder="Email" name="email"
					onfocus="clearLoginMsg();"
					class="form-control rounded input-lg text-center no-border">
			</div>

			<div class="form-group">
				<input type="password" placeholder="Password" name="password"
					onfocus="clearLoginMsg();"
					class="form-control rounded input-lg text-center no-border">
			</div>
			<!-- 隐藏域 -->
			<div class="form-group">
				<input type="hidden" name="hideflag" value="login">
			</div>
			<div>
				<input type="hidden" name="clientToken"
					value="<%=session.getAttribute("token")%>">
			</div>
			<!-- 输入验证码 -->
			<div class="col-md-7">
				<input type="text" name="checkCode" placeholder="Check Code"
					class="form-control rounded input-lg text-center no-border">
			</div>
			<!-- 验证码图片 -->
			<img style="position: relative; top: 10px;" src="ValidateCodeServlet"
				alt="换一张" id="imageCheck" onclick="changeImg(this,'n')">
			<!-- 提交按钮 -->
			<button type="submit"
				class="btn btn-lg btn-warning lt b-white b-2x btn-block btn-rounded">
				<i class="icon-arrow-right pull-right"></i><span class="m-r-n-lg">Sign
					in</span>
			</button>
			<div class="text-center m-t m-b">
				<a href="#"><small>Forgot password?</small></a>
			</div>

			<!-- EL表达式默认会从 pageScope requestScope  sessionScope  applicationScope中查找数据 -->
			<span class="span" id="login_span">${requestScope.login_msg}</span>
			<div class="line line-dashed">
				<%-- 
          		<%
					// 获取到request对象:  request对象可以直接用。  
					String loginMsg = (String)request.getAttribute("login_msg");
				%>
				<span><%=loginMsg==null?"":loginMsg %></span>
			--%>
			</div>
			<p class="text-muted text-center">
				<small>Do not have an account?</small>
			</p>
			<a href="regist.jsp" class="btn btn-lg btn-info btn-block rounded">Create
				an account</a>
		</form>
		</section>
	</div>
	</section>
	<!-- footer -->
	<footer id="footer">
	<div class="text-center padder">
		<p>
			<small>Web app framework base on Bootstrap<br>&copy;
				2014
			</small>
		</p>
	</div>
	</footer>
	<!-- / footer -->
	<script src="musik/js/jquery.min.js"></script>
	<!-- Bootstrap -->
	<script src="musik/js/bootstrap.js"></script>
	<!-- App -->
	<script src="js/app.js"></script>
	<script src="js/slimscroll/jquery.slimscroll.min.js"></script>
	<script src="js/app.plugin.js"></script>
	<script type="text/javascript" src="js/jPlayer/jquery.jplayer.min.js"></script>
	<script type="text/javascript"
		src="js/jPlayer/add-on/jplayer.playlist.min.js"></script>
	<script type="text/javascript" src="js/jPlayer/demo.js"></script>
	<script type="text/javascript">
			// js代码
			function clearLoginMsg(){
				var spanEle = document.getElementById("login_span");
				spanEle.innerHTML ="";
			}
			
			function changeImg(obj, createTypeFlag) {
			    console.log("in");
			    //一点击图片的时候，再次发送请求到生成验证码的servlet，通过src发送，直接src变化，图片刷新
			    document.getElementById(obj.id).src = "ValidateCodeServlet?createTypeFlag="
			        + createTypeFlag + "&" + Math.random();
			};
			
	</script>
</body>
</html>